<template>
    <el-form-item :label="ctx.label.value">
        <template v-if="ctx.type === 'radio'">
            <el-radio-group v-model="viewData.value">
                <el-radio label="1">选项1</el-radio>
                <el-radio label="2">选项2</el-radio>
            </el-radio-group>
        </template>
        <template v-else-if="ctx.type === 'checkbox'">
            <el-checkbox-group v-model="viewData.value">
                <el-checkbox label="1">选项1</el-checkbox>
                <el-checkbox label="2">选项2</el-checkbox>
            </el-checkbox-group>
        </template>
        <template v-else-if="ctx.type === 'select'">
            <el-select v-model="viewData.value">
                <el-option value="1" label="选项1"></el-option>
                <el-option value="2" label="选项2"></el-option>
            </el-select>
        </template>
        <template v-else-if="ctx.type === 'switches'">
            <el-switch v-model="viewData.value"></el-switch>
        </template>
        <template v-else-if="ctx.type === 'cascader'">
            <el-cascader v-model="viewData.value" :options="viewData.options" />
        </template>
        <template v-else-if="ctx.type === 'slider'">
            <el-slider v-model="viewData.value" />
        </template>
        <template v-else-if="ctx.type === 'rate'">
            <el-rate v-model="viewData.value" />
        </template>
        <template v-else-if="ctx.type === 'color'">
            <el-color-picker v-model="viewData.value" />
        </template>
    </el-form-item>
</template>

<script lang="ts" setup>
import { byId } from '../lib/form'
import { reactive } from 'vue'

const props = defineProps<{ id: string }>()
const ctx = byId(props.id)
const viewData = reactive({
    value: undefined,
    options: [],
})
</script>

<style scoped lang="scss"></style>
